<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./download/font_3740330_x038xws0eh/iconfont.css">
    <title>Document</title>
    <style>
        .box {
            /* 的的方法 */
            width: 300px;
            height: 400px;

            margin: 100px auto;
            overflow: hidden;
        }

        .box .minbox {
            width: 200px;
            height: 250px;

            margin: auto;
            margin-top: 70px;
        }

        .box .minbox .iconfont {
            position: relative;
            top: -48px;
            right: 30px;
            font-size: 22px;
        }

        .box input{
            border: 0;
            border-bottom: 1px solid grey;
            width: 200px;
            height: 30px;
            margin-bottom: 20px;
            padding-left: 10px;
        }

        .box .minbox .zhuce {
            width: 200px;
            height: 30px;
            background-color: orange;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="minbox">
            <input type="text" placeholder="邮箱">
            <div class="iconfont icon-youxiang"></div>
            <input type="text" placeholder="昵称">
            <div class="iconfont icon-yonghu-xianxing
            "></div>
            <input type="text" placeholder="密码">
            <div class="iconfont icon-lock"></div>
            <input type="text" placeholder="确认密码">
            <div class="iconfont icon-lock"></div>
            <div class="zhuce">注册</div>
        </div>
    </div>
</body>

</html>
<script>
    var zhuce = document.querySelector('.zhuce')
    var input = document.querySelector('.box .minbox input:nth-of-type(1)')
    
    var input1 = document.querySelector('.box .minbox input:nth-of-type(2)')
    
    var input2 = document.querySelector('.box .minbox input:nth-of-type(3)')
    var input3 = document.querySelector('.box .minbox input:nth-of-type(4)')
    zhuce.onclick = function () {
        var reg = /^\w{1,}@[0-9a-z]{1,}\.(com|cn|org)$/;
        var reg1 = /.{4}/;
        var reg2 = /\d/;
        var reg3 = /[a-zA-Z]/;
        var reg4 = /^[0-9a-zA-Z]{6,}$/;
        var res1 = reg.test(input.value);
        var res2 = reg1.test(input1.value);
        var res3 = reg2.test(input2.value);
        var res4 = reg3.test(input2.value);
        var res5 = reg2.test(input3.value);
        var res6 = reg3.test(input3.value);
        if (res1 && reg2 && reg3 && reg4 && res5 && res6) {

            alert('恭喜，注册验证通过！')

        } else {
          alert('请输入合法信息！')
        }
        if (input2.value !== input3.value) {
            alert('密码不一致！')
        }
    }

</script>